<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="月份">
                  <el-date-picker
                    v-model="searchModel.yearMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月份"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item >
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div v-loading="loading">
          <el-card shadow="never">
            <div class="my-card">
              <div  class="my-card-title">{{statData.year}} 年 {{ statData.month }} 月 </div>
              <div class="f-r"><el-button type="text" @click="exportBill">导出明细</el-button></div>
            </div>

            <div class="text-box">
              <span class="card-text">商户服务费： </span>
              <span>{{statData.finalServiceFee}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">银行转账金额： </span>
              <span>{{statData.successBankAmount}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">支付宝转账金额： </span>
              <span>{{statData.successAlipayAmount}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">产生手续费的充值金额： </span>
              <span>{{statData.chargeAmount}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">充值手续费： </span>
              <span>{{statData.chargeCost}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">月分佣： </span>
              <span>{{statData.totalBenefitFee}} <span class="card-tip-text">元</span></span>
              <span class="card-tip-text">（计算公式：商户服务费 - 银行卡转账千1费率 * 银行转账金额 - 充值手续费）* 0.2</span>
            </div>

          </el-card>
        </div>

        <!-- <div v-loading="loading" class="m-t-24">
          <el-card shadow="never">
            <div class="my-card">
              <div  class="my-card-title">老数据：{{statData.year}} 年 {{ statData.month }} 月 </div>
            </div>

            <div class="text-box">
              <span class="card-text">支付宝转账金额： </span>
              <span>{{statData.successAlipayAmount}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">银行转账金额： </span>
              <span>{{statData.successBankAmount}} <span class="card-tip-text">元</span></span>
            </div>
            <div class="text-box">
              <span class="card-text">支付宝分佣： </span>
              <span>{{statData.alipayBenefitFee}} <span class="card-tip-text">元</span></span>
              <span class="card-tip-text">（计算公式：支付宝转账金额 * 0.006 * 0.994 * 0.2）</span>
            </div>
            <div class="text-box">
              <span class="card-text">到卡分佣： </span>
              <span>{{statData.bankBenefitFee}} <span class="card-tip-text">元</span></span>
              <span class="card-tip-text">（计算公式：银行转账金额 * 0.005 * 0.994 * 0.2）</span>
            </div>
            <div class="text-box">
              <span class="card-text">总分佣： </span>
              <span>{{statData.oldTotalBenefitFee}} <span class="card-tip-text">元</span></span>
            </div>

          </el-card>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { statMonthBill } from "@/api/business";
const defaultModel = {
  yearMonth: moment().subtract(1, "M").format("YYYY-MM"),
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      statData: {},
      loading: false,
    };
  },
  created() {
    // 初始化数据
    this.init();
  },
  methods: {
    init() {
      var self = this;
      this.loading = true;

      let searchModel = _.cloneDeep(this.searchModel);
      statMonthBill(this.compileSearchModel(searchModel))
        .then((data) => {
          self.statData = data.data;
          this.loading = false;
        })
        .catch((err) => {});
    },

     exportBill() {
      var $temp = $("<form type='hidden'>"); //创建form标签
      $temp.attr("target", "_black");
      $temp.attr("method", "get");
      $temp.attr("action", "/api/admin/user-safe-pay-trans-month-stat/export-month-bill");
      var $input = $('<input type="hidden">');
      $input.attr("name", "searchModelJson");

      let form = {
        year: this.statData.year,
        month: this.statData.month
      }

      $input.attr("value", JSON.stringify(form));
      $temp.append($input);
      $(document.body).append($temp);
      $temp.submit();
    },

    // 重置查询条件
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.init();
    },
    // 查询
    search() {
      this.init();
    },
    // 对searchModel进行处理
    compileSearchModel(searchModel) {
      if (searchModel.yearMonth) {
        let yearMonth = searchModel.yearMonth.split("-");
        searchModel["year"] = yearMonth[0];
        searchModel["month"] = yearMonth[1];
      }

      delete searchModel.yearMonth;
      return searchModel;
    },
  },
};
</script>

<style lang="scss" scoped>
.operations {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card-text {
  display: inline-block;
  width: 200px;
  color: #999;
  font-weight: 500;
  font-size: 14px;
}
.card-tip-text {
  color: #999;
  font-size: 14px;
}

.text-box {
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}

.my-card-title {
  color: #333;
  font-size: 26px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  display: inline-block;
}

.my-card {
  height: 40px;
  line-height: 40px;
  border-bottom: #f1f1f1 1px solid;
}

.f-r {
  float: right;
}
</style>
